<template>
  <view class="binding">
    <view class="title">
      已绑定的设备：
    </view>
    <view class="container">
      <view class="container-item" v-for="item in store.snInfo" :key="item.id">
        <view class="item-left">
          <text>SN码：</text>
          <text>{{item.equipmentId}}</text>
        </view>
        <view class="item-right">
          <text>{{item.caeatTime}}</text>
        </view>
      </view>
    </view>
    <view class="btn" v-if="store.snInfo.length < 3">
      <button type="primary" style="font-size: 14px;" @click="addSn">+新增SN码</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import {useMemberInfoStore} from '@/store/pinia/memberInfo'
  
  const store = useMemberInfoStore()
 const addSn = ()=>{
   uni.navigateTo({
     url:'/subpkg/bindingSnDetail/bindingSnDetail'
   })
 }
</script>

<style lang="scss" scoped>
.binding{
  font-size: 14px;
  color: #333;
  background-color: #ccc;
  overflow: hidden;
  .title{
    margin-top: 40rpx;
    padding: 10rpx 40rpx;
  }
  .container{  
    .container-item{
      background-color: #fff;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 40rpx;
      margin-bottom: 20rpx;
      .item-right{
        color: #999;
      }
    }
  }
  .btn{
    margin-top: 50rpx;
  }
}
</style>
